<template>
    <view style="width:100%">
        <view @click="$refs.popupSearchSelect.open()">
            <text v-if="selLabel">{{selLabel}}</text>
            <text v-else>{{placeholder}}</text>
            <uni-popup ref="popupSearchSelect" type="bottom" style="z-index: 9999;">
                <view style="background-color: #FFFFFF; height: 40vh;">
                    <view class="popup-top-box">
                        <view class="color-gray text-lg" @click.stop="$refs.popupSearchSelect.close()">取消</view>
                        <view class="search-box">
                            <input type="text" v-model="searchKeyword" style="padding:0 10rpx;font-size: 28rpx;"
                                :placeholder="searchPlaceholder" />
                            <button size="mini" style="border-radius: 22px;padding: 0;width: 100rpx;" type="primary"
                                @click="doSearch">查询</button>
                        </view>
                        <view class="color-blue text-lg" @click.stop="save()">完成</view>
                    </view>
                    <picker-view :value="selIdx" @change="change" class="picker-view" style="z-index: 9999;">
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in dataOptions" :key="index">
                                {{item.label}}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    export default {
        name: "zwSearchSelect",
        props: {
            data: {
                type: [Array, Object],
                default: null
            },
            placeholder: {
                type: String,
                default: "请选择"
            },
            value: {
                type: [Array, Object, Number, String],
                default: null
            },
            valKey: {
                type: String,
                default: "id"
            },
            labelKey: {
                type: String,
                default: "name"
            },
            searchKey: {
                type: String,
                default: "name"
            },
            searchPlaceholder: {
                type: String,
                default: "请输入关键词"
            },
        },
        data() {
            return {
                selIdx: [0],
                selValue: null,
                selLabel: "",
                searchKeyword: "",
                dataOptions: []
            };
        },
        created() {
            let tempData = [{
                val: "",
                label: "请选择"
            }];
            this.data.forEach(item => {
                tempData.push({
                    val: item[this.valKey],
                    label: item[this.labelKey],
                })
            })
            this.dataOptions = tempData;
            let index = this.dataOptions.findIndex(item => {
                return item[this.valKey] == this.value;
            })
            if (index > -1) {
                this.selIdx[0] = index;
            }
        },
        methods: {
            async change(e) {
                this.selIdx = e.target.value;
            },
            async save(e) {
                let index = this.selIdx[0];
                this.selValue = this.dataOptions[index].val;
                this.selLabel = this.dataOptions[index].label;
                this.$emit('input', this.selValue)
                this.$emit("change",{index:this.selIdx,data:this.dataOptions[index]})
                this.$refs.popupSearchSelect.close()
            },
            doSearch() {
                let tempData = [{
                    val: "",
                    label: "请选择"
                }];
                this.data.forEach(item => {
                    if (!this.searchKeyword || item[this.searchKey].indexOf(this.searchKeyword) > -1) {
                        tempData.push({
                            val: item[this.valKey],
                            label: item[this.labelKey],
                        })
                    }
                })
                this.dataOptions = tempData;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .color-blue {
        background-color: #1e78fd
    }
    .color-gray {
        color: #666666;
    }
    .text-lg {
        font-size: 32rpx;
    }

    .popup-top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        border-bottom:1px solid #CCCCCC;
    }
    .search-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 400rpx; height: 60rpx; border:1px solid #999999;border-radius: 22px;font-size: 28rpx;
    }
    .picker-view {
        width: 750rpx;
        height: 300rpx;

        margin-top: 20rpx;

        .item {
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    }
</style>
